<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>排队预约</title>

    <!-- 引入 jQuery -->
    <script src="/js/jquery.min.js"></script>

    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        .header {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
        .print-button, .refresh-button {
            margin-bottom: 20px;
        }

        @media print {
            body {
                font-size: 14px;
            }
            .print-button,
            .refresh-button {
                display: none;
            }
            table {
                page-break-inside: auto;
            }
            tr {
                page-break-inside: avoid;
                page-break-after: auto;
            }
        }
    </style>
</head>
<body>

<!-- 打印和刷新按钮 -->
<div class="print-button">
    <button class="btn btn-success" onclick="window.print()">️ 打印排队信息</button>
</div>
<div class="refresh-button">
    <button class="btn btn-primary" onclick="refreshList()">🔄 刷新队列</button>
</div>

<!-- 科室名称显示 -->
<div class="header">科室名称：<span id="departmentName">加载中...</span></div>

<!-- 排队列表表格 -->
<table>
    <thead>
    <tr>
        <th>序号</th>
        <th>用户名</th>
    </tr>
    </thead>
    <tbody id="waitingList">
    <!-- 动态数据插入 -->
    </tbody>
</table>

<script>
    // 页面加载完成后自动加载一次数据
    $(document).ready(function () {
        loadData();
    });

    // 加载并渲染数据函数
    function loadData() {
        const urlParams = new URLSearchParams(window.location.search);
        const scheduleId = urlParams.get('scheduleId');

        if (!scheduleId) {
            alert("缺少必要的参数：scheduleId");
            return;
        }

        fetch('users/getAppointmentWaiting', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ scheduleId: scheduleId })
        }).then(response => {
            const departmentName = response.headers.get('X-Department-Name');
            $("#departmentName").text(departmentName || "未知科室");
            return response.json();
        }).then(data => {
            // 过滤掉 status=4（已完成）或 status=5（已取消）的数据
            const filteredData = data.filter(item => ![4, 5].includes(item.status));

            let tbody = "";
            if (filteredData.length === 0) {
                tbody = "<tr><td colspan='2'>暂无排队信息</td></tr>";
            } else {
                filteredData.forEach((item, index) => {
                    tbody += "<tr>";
                    tbody += "<td>" + item.queueNumber + "</td>";
                    tbody += "<td>" + item.userName + "</td>";
                    tbody += "</tr>";
                });
            }
            $("#waitingList").html(tbody);
        }).catch(error => {
            alert("获取数据失败：" + error.message);
            $("#waitingList").html("<tr><td colspan='2'>加载失败，请刷新重试</td></tr>");
        });
    }

    // 刷新按钮点击事件
    function refreshList() {
        loadData(); // 调用数据加载函数即可刷新
    }
</script>

</body>
</html>
